<template>
  <div>
    <!-- AI解析弹窗 -->
    <el-dialog :visible.sync="aiAnalyzeDialogVisible" title="AI解析结果" width="40%" :before-close="closeAiAnalyzeDialog">
      <div v-loading="aiAnalyzeLoading">
        <div v-if="aiAnalyzeResult">
          <h4>AI解析结果：</h4>
          <div class="ai-analyze-content">
            <div v-if="aiAnalyzeResult.answer">
              <h5>答案：</h5>
              <div v-html="aiAnalyzeResult.answer"></div>
            </div>
            <div v-if="aiAnalyzeResult.analyze">
              <h5>解析：</h5>
              <div v-html="aiAnalyzeResult.analyze"></div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeAiAnalyzeDialog">取 消</el-button>
        <el-button type="primary" @click="adoptAiAnalyze">采 纳</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { aiAnalyzeQuestion } from "@/api/question.js";

export default {
  name: "AIFeatures",
  props: {
    question: {
      type: Object,
      required: true
    },
    parentQuestion: {
      type: Object,
      default: () => ({})
    },
    questionType: {
      type: Object,
      default: () => ({
        1: "单选题",
        2: "多选题",
        3: "判断题",
        4: "填空",
        5: "简答题",
        6: "材料题",
        7: "连线题",
      })
    }
  },
  data() {
    return {
      // AI解析相关数据
      aiAnalyzeDialogVisible: false,
      aiAnalyzeLoading: false,
      aiAnalyzeResult: null
    };
  },
  methods: {
    // AI解析相关方法
    handleAiAnalyze() {
      // 检查题目是否为空
      if (!this.question.title) {
        this.$message.warning('请先输入题目内容再进行AI解析');
        return;
      }
      
      this.aiAnalyzeLoading = true;
      this.aiAnalyzeDialogVisible = true;
      
      // 准备选项数据
      let select = null;
      if ([1, 2, 3].includes(Number(this.question.type))) { // 单选、多选、判断题
        select = JSON.stringify(this.question.select);
      }
      
      // 调用AI解析API
      aiAnalyzeQuestion(
        this.question.title, 
        this.questionType[this.question.type], // 将数字类型转换为中文描述
        this.parentQuestion.materials, 
        select
      )
        .then(res => {
          if (res.code == 0) {
            this.aiAnalyzeResult = res.data;
          } else {
            this.$message.error(res.msg || 'AI解析失败');
          }
        })
        .catch(err => {
          console.error('AI解析出错:', err);
          this.$message.error('AI解析服务异常，请稍后再试');
        })
        .finally(() => {
          this.aiAnalyzeLoading = false;
        });
    },
    
    closeAiAnalyzeDialog() {
      this.aiAnalyzeDialogVisible = false;
      this.aiAnalyzeResult = null;
    },
    
    adoptAiAnalyze() {
      if (!this.aiAnalyzeResult) {
        this.$message.warning('没有可采纳的AI解析结果');
        return;
      }
      
      // 根据题目类型处理答案
      if (this.aiAnalyzeResult.answer) {
        this.$emit('adopt-answer', JSON.parse(this.aiAnalyzeResult.answer));
      }
      
      // 设置解析
      if (this.aiAnalyzeResult.analyze) {
        this.$emit('adopt-analyze', this.aiAnalyzeResult.analyze);
      }
      
      this.$message.success('已采纳AI解析结果');
      this.closeAiAnalyzeDialog();
    },
    
    // 暴露给父组件调用的方法
    showAiAnalyze() {
      this.handleAiAnalyze();
    }
  }
};
</script>

<style scoped>
.ai-analyze-content {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.ai-analyze-content h5 {
  margin-top: 15px;
  margin-bottom: 8px;
  color: #409EFF;
}

.ai-analyze-content h5:first-child {
  margin-top: 0;
}
</style>